<script setup>
// 正确引入 PIXI 和 pixi-spine
import 'pixi-spine'
import * as PIXI from 'pixi.js';
import { Spine } from 'pixi-spine';
import { onMounted, ref } from 'vue';


const props = defineProps(['assetUrl', 'offset'])

const stageRef = ref()
// 创建一个加载和显示 Spine 动画的函数
const loadSpineAnimation = () => {

  // 加载 Spine 资源
  // 替换为您的实际资源路径
  const spineUrl = props.assetUrl;
  
  // 加载资源
  PIXI.Assets.load(spineUrl).then((resource) => {
    // 创建 Spine 动画实例
    console.log('resource:', resource);
    const spine = new Spine(resource.spineData);

    
  // 创建 PIXI 应用
  const { width, height } = resource.spineData;
  const app = new PIXI.Application({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
    backgroundColor: 0x000000,
    backgroundAlpha: 0,
    view: stageRef.value,
  });
    
    // 设置动画位置
    spine.x = app.screen.width / 3.2;
    spine.y = app.screen.height * 0.9;
    
    // 缩放动画
    spine.scale.set(0.6);
    
    // 添加到舞台
    app.stage.addChild(spine);
    
    // 获取可用的动画名称
    const animations = spine.spineData.animations.map(animation => animation.name);
    console.log('可用的动画:', animations);
    
    // 播放第一个动画，设置为循环播放
    if (animations.length > 0) {
      spine.state.setAnimation(0, animations[0], true);
    }
    
    // 可以通过以下方式切换动画
    // spine.state.setAnimation(0, '其他动画名称', true);
  });
};

// 组件挂载后初始化 PIXI
onMounted(() => {
  loadSpineAnimation();
});

const onClick = () => {
  console.log('按钮被点击了');
};
</script>

<template>
  <div>
    <!-- Spine 动画容器 -->
    <div class="spine-container">
      <canvas class="stage" ref="stageRef" style="--c_width: 100%"></canvas>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.spine-container {
  .stage {
    width: var(--c_width);
    height: calc(3 * var(--c_width) / 4);
  }
}
</style>